import { Image, Space, Steps } from "antd";
import Logo from "../components/Logo";
import styles from './index.less';
import classnames from 'classnames';
import OrderIcon from "../components/icons/Order";
import PayOkIcon from "../components/icons/PayOk";
import WaitShouIcon from "../components/icons/waitShou";
import OrderOkIcon from "../components/icons/OrderOk";
import { money } from "@/utils/money";
import { useParams } from "@umijs/max";
import { useRequest } from "ahooks";
import { getOrderDetails } from "@/services/order";
import { orderStatus, orderStatusNum, paymentType } from "./const";
import { getLogisticsInfo } from "@/services/logistics";

const BtnRender = ({text}) => {
    return (
        <div className={styles.btnRender}>
            {text}
        </div>
    )
}
const OrderDetails = () => {
    const id = useParams().id;
    const {data} = useRequest(() => {
        return getOrderDetails({orderNo: id}).then(res => {
            return res.data;
        })
    },{
        refreshDeps: [id]
    })

    const {data: LogisticsData } = useRequest(() => {
        if (data?.orderStatus === 'PENDING' || data?.orderStatus === 'COMPLETED' ) {
            return getLogisticsInfo({
                logisticsNo: data?.logisticsRecordList?.[0]?.logisticsNo,
                logisticsCompanyCode: data?.logisticsRecordList?.[0]?.logisticsCompanyCode,
                recipientPhone: data?.recipientPhone,
            }).then(res => {
                return res.data;
            })
        } else {
            return Promise.resolve();
        }
    },{
        refreshDeps: [data]
    })

    return (
        <div className={styles.page}>
            <div style={{ width: '1400px' }}>
                <div className={styles.top}>
                    <Logo />
                    <div className={styles.title}>
                        订单详情页
                    </div>
                </div>
                <div className={classnames(styles.box, styles.steps)}>
                    <div className={styles.orderNo}>
                        <div>订单编号：{data?.orderNo}</div>
                        <BtnRender text={orderStatus?.[data?.orderStatus] || '待付款'} />
                    </div>
                    <div className={styles.stepBox}>
                        <Steps
                            labelPlacement="vertical"
                            current={(orderStatusNum[data?.orderStatus] || 0)}
                            items={[
                            {   
                                title: '提交订单',
                                description: `${data?.createTime || ''}`,
                                icon: <OrderIcon style={{ fontSize: '30px' }} />,
                            },
                            {
                                title: '付款成功',
                                description: `${data?.payTime || ''}`,
                                icon: <PayOkIcon style={{ fontSize: '30px' }} />,
                            },
                            {
                                title: '等待收货',
                                description: `${data?.recipientTime || ''}`,
                                icon: <WaitShouIcon style={{ fontSize: '30px' }} />,
                            },
                            {
                                title: '完成',
                                description: `${data?.completeTime || ''}`,
                                icon: <OrderOkIcon style={{ fontSize: '30px' }} />,
                            },
                            ]}
                        />
                    </div>
                </div>
                <div className={classnames(styles.box, styles.express)}>
                    <div className={styles.address}>
                        <Space direction="vertical" size={15}>
                            <div>送货方式：{data?.logisticsRecordList?.[0]?.logisticsCompany || ''}</div>
                            <div>货运单号：{data?.logisticsRecordList?.[0]?.logisticsNo || ''}</div>
                            <div>收货人：{data?.logisticsRecordList?.[0]?.recipientName || ''}</div>
                            <div>手机号码：{data?.logisticsRecordList?.[0]?.recipientPhone || ''}</div>
                            <div>收获地址：{data?.logisticsRecordList?.[0]?.recipientAddress || ''}</div>
                        </Space>
                    </div>
                    <div className={styles.expressInfo}>
                        <div>
                            {LogisticsData?.logisticsInfo}
                        </div>
                    </div>
                </div>
                <div className={classnames(styles.box, styles.type)}>
                    <div className={styles.orderNo} style={{ marginInline: 60 }}>
                        <div>交易方式</div>
                        <BtnRender text="在线支付" />
                    </div>
                    <div className={styles.orderNo}>
                        <div>付款方式</div>
                        <BtnRender text={paymentType[data?.paymentType] || '微信支付'} />
                    </div>
                </div>
                <div className={styles.box}>
                    <div style={{ fontWeight: 600 }}>商品清单</div>
                    <div className={styles.goodsInfo}>
                    {
                        data?.orderGoodsList?.length > 0 ? data?.orderGoodsList.map((item) => {
                            return (
                                <div style={{ display: 'flex', alignItems: 'center', marginBlock: 10 }}>
                                        <div className={styles.goods}>
                                            <Image width={60} height={60} preview={false} src={item?.picture} />
                                            <div className={styles.goodsName}>
                                                <div>{item?.goodsName}</div>
                                                <div style={{ display: 'flex' }}><div style={{ fontWeight: 600 }}>规格：</div>{item?.skuName}</div>
                                            </div>
                                        </div>
                                        <div className={styles.goodsParams}>
                                            <div>单价</div>
                                            <div>¥ {money(item?.price)}</div>
                                        </div>
                                        <div className={styles.goodsParams}>
                                            <div>数量</div>
                                            <div>x {item?.quantity || 0}</div>
                                        </div>
                                    </div>

                                )
                            }) : null
                        }
                    </div>
                </div>
                <div className={classnames(styles.box, styles.view)}>
                    <Space size={20} direction="vertical">
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}>
                            <div style={{ width: '120px', textAlign: 'end' }}>总商品金额：</div>
                            <div style={{ width: '150px', textAlign: 'end' }}>¥ {money(data?.totalPrice)}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}>
                            <div style={{ width: '120px', textAlign: 'end' }}>运费：</div>
                            <div style={{ width: '150px', textAlign: 'end' }}>¥ {money(data?.expressPrice)}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}>
                            <div style={{ width: '120px', textAlign: 'end' }}>优惠：</div>
                            <div style={{ width: '150px', textAlign: 'end' }}>- ¥ {money(data?.discountPrice)}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end' }}>
                            <div style={{ width: '120px', textAlign: 'end' }}>应付总额：</div>
                            <div style={{ width: '150px', color: 'red', textAlign: 'end' }}>¥ {money(data?.payablePrice)}</div>
                        </div>
                        <div>
                            收货人：{data?.recipientName || ''}&nbsp;&nbsp;
                            收货地址：{data?.recipientAddress || ''} &nbsp;&nbsp;
                        </div>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default OrderDetails;